<template>
	<view class="myTask">
		<!-- <view class="order-view">
			<view class="order-view-view" @tap="getNewTask">
				<image src="../../static/task/fabu.png" class="order-view-image"></image>
				<view class="order-view-text">发布任务</view>
			</view>
			<view class="order-view-view" @tap="goDispatchTask">
				<image src="../../static/task/paidan.png" class="order-view-image"></image>
				<view class="order-view-text">发单列表</view>
			</view>
			<view class="order-view-view" @tap="goAuditTask">
				<image src="../../static/task/shenhe.png" class="order-view-image"></image>
				<view class="order-view-text">发单审核</view>
			</view>
			<view class="order-view-view" @tap="goRight">
				<image src="../../static/task/weiquan.png" class="order-view-image"></image>
				<view class="order-view-text">发单维权</view>
			</view>
			<view class="order-view-view" @tap="gomyOrder">
				<image src="../../static/task/taskordermy.png" class="order-view-image"></image>
				<view class="order-view-text">接单列表</view>
			</view>
		</view> -->
		<view class="tui-tabs">
			<scroll-view id="tab-bar" scroll-with-animation class="tui-scroll-h" :scroll-x="true" :show-scrollbar="false" style="width: 95%;position: unset;border-bottom: 2upx solid #F8F8F8;">
				<view style="display: flex;">
					<view v-for="(tab, index) in selectOption" :data-current="index" @tap='tabSlect(tab,index)'>
						<view class="tui-tab-item-title" style="margin-left: 50upx;" :class="{ 'tui-tab-item-title-active': tabIndex1 == index }">{{ tab.classifyName }}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<scroll-view id="tab-bar" scroll-with-animation class="tui-scroll-h" :scroll-x="true" :show-scrollbar="false" style="width: 95%;margin-left: 20upx;position: unset;border-bottom: 2upx solid #F8F8F8;">
			<view style="display: flex;">
				<view v-for="(tab, index) in tabBars" :key="tab.id" :id="tab.id" :data-current="index" @tap="tabClick(tab)">
					<view class="tui-tab-item-title" style="margin-left: 85upx;" :class="{ 'tui-tab-item-title-active': tabIndex == tab.id }">
						{{ tab.name }}
						<view style="display: flex;flex-direction: column;margin-top: 28upx;margin-left: 5upx;">

							<image v-if="tab.select === 1" src="../../static/task/uparrsel.png" style="width: 13upx;height: 10upx;"></image>
							<image v-if="tab.select != 1" src="../../static/task/uparr.png" style="width: 13upx;height: 10upx;"></image>
							<image v-if="tab.select === 2" src="../../static/task/downarrsel.png" style="width: 13upx;height: 10upx;margin-top: 5upx;background: #FFFFFF;"></image>
							<image v-if="tab.select != 2" src="../../static/task/downarr.png" style="width: 13upx;height: 10upx;margin-top: 5upx;background: #FFFFFF;"></image>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- 悬浮上拉 -->
		<view style="position: fixed;bottom: 200upx;right: 20upx;z-index: 9999;" @tap="getNewTask">
			<image src="../../static/task/fabu.jpg" class="order-view-image1"></image>
		</view>
		
		<view class="task-content">
			<view>
				<!-- <uni-list v-show="taskList.length > 0"> -->
				<uni-list>
					<uni-list-item :show-arrow="false" v-for="(item, index) in taskList" :key="index">
						<view style="width: 100%;display: flex;" @click="taskItem(item.id)">
							<view style="width:76%;display: flex;">
								<image :src="item.label" style="border-radius: 100upx;width: 100upx;height: 100upx;background-size: 100%;"></image>
								<view style="width: 75%;margin-left: 20upx;">
									<view style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ item.title }}</view>
									<view style="width: 100%;font-size: 26upx;margin-top: 10upx;color: #999999;">ID:{{item.id}} <text style="margin-left: 20upx;">{{ item.endNum }}人已接，剩余{{ item.taskNum - item.endNum }}个</text></view>
									<view v-if="item.tag" style="font-size: 24upx;background: #fff5f4;padding: 5upx 10upx;width: max-content;margin-top: 5upx;color: #ef5b05;border-radius: 10upx;">{{item.tag}}</view>
								</view>
							</view>
							<view style="width: 24%;text-align: right;">
								<view style="text-align: right;margin-left: 10upx;margin-top: 10upx;font-size: 38upx;color: #ef5b05;font-weight: 600;">
									<text style="font-size: 28upx;height: 50upx;">+</text> {{ item.taskOriginalPrice }}元
								</view>
								<image src="../../static/img/task/top.png" v-if='item.isTop == 1' style="margin-left: 10upx;width: 40upx;height: 30upx;font-size: 20upx;;border-radius: 10upx;margin-right: 10upx;color: #FFFFFF;padding-left: 10upx;margin-top: 30upx;"></image>
							</view>
						</view>
					</uni-list-item>
				</uni-list>
			</view>

			<!-- 加载更多提示 -->
			<!-- <view class="s-col is-col-24" v-if="taskList.length > 0"> -->
			<view class="s-col is-col-24">
				<tuiLoadmore :loadingType="loadingType" :contentText="contentText"/>
			</view>
			<!-- 加载更多提示 -->
			<empty v-if="taskList.length === 0" des="暂无数据" show="false"></empty>
		</view>
	</view>
</template>

<script>
	import tuiIcon from '../../components/icon/icon';
	import tuiTag from '../../components/tag/tag';
	import uniList from '../../components/uni-list/uni-list.vue';
	import uniListItem from '../../components/uni-list-item/uni-list-item.vue';
	import tuiListCell from '../../components/list-cell/list-cell';
	import tuiLoadmore from '../../components/loadmore/loadmore';
	import tuiNomore from '../../components/nomore/nomore';
	import tuiTips from '../../components/tips/tips';
	import tNewsItem from '../../components/views/t-news-item/t-news-item.nvue';
	import tRtPopup from '../../components/views/t-rt-popup/t-rt-popup';
	import tuiButton from '../../components/thorui/tui-button/tui-button.vue';

	export default {
		components: {
			uniList,
			uniListItem,
			tuiIcon,
			tuiTag,
			tuiListCell,
			tuiLoadmore,
			tuiNomore,
			tuiTips,
			tNewsItem,
			tuiButton,
			tRtPopup
		},
		data() {
			return {
				taskList: [],
				rate: [],
				userState: '',
				tabIndex1: 0,
				tabclassifyId: 0,
				tabBars: [{
						name: '默认',
						id: 'hot',
						sort: 0,
						select: 1
					},
					{
						name: '数量',
						id: 'yule',
						sort: 1,
						select: 0
					},
					{
						name: '热门',
						id: 'sports',
						sort: 2,
						select: 0
					},
					{
						name: '佣金',
						id: 'domestic',
						sort: 3,
						select: 0
					}
				],
				tabIndex: 'hot',
				tabSelect: 1,
				selectOption: [],
				tabSort: 0,
				page: 1,
				size: 10,
				cid: 0,
				type: 1,
				loadingType: 0,
				scrollTop: false,
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				}
			};
		},
		onShow() {
			let userId = this.$queue.getData('userId');
			console.log("userId: "+userId);
			
			if (userId) {
				this.getUserInfo(userId);
			}
			this.getselectClassifyList();
			this.page = 1;
			this.selectTask('', 0);
		},
		methods: {
			gomyOrder(){
				let token = this.$queue.getData('token');
				if (token) {
					uni.navigateTo({
						url: '/pages/task/myTask'
					});
				} else {
					this.goLoginInfo();
				}
			},
			getselectClassifyList() {
				this.$Request.getT('/helpClassify/select').then(res => {
					if (res.code === 0) {
						this.selectOption = [];
						let data = {
							classifyName: '全部',
							id: '0'
						}
						this.selectOption.push(data);
						for (var i = 0; i < res.data.length; i++) {
							this.selectOption.push(res.data[i]);
						}
					}
				});
			},
			getNewTask() {
				let token = this.$queue.getData('token');
				if (token) {
					uni.navigateTo({
						url: '/package-task/pages/task/new'
					});
				} else {
					this.goLoginInfo();
				}
			},
			goDispatchTask() {
				let token = this.$queue.getData('token');
				if (token) {
					uni.navigateTo({
						url: '/pages/task/myList'
					});
				} else {
					this.goLoginInfo();
				}
			},
			goAuditTask() {
				let token = this.$queue.getData('token');
				if (token) {
					uni.navigateTo({
						url: '/pages/task/examine'
					});
				} else {
					this.goLoginInfo();
				}
			},
			goRight() {
				let token = this.$queue.getData('token');
				if (token) {
					uni.navigateTo({
						url: '/pages/task/rights'
					});
				} else {
					this.goLoginInfo();
				}
			},
			getUserInfo(userId) {
				this.$Request.postJson('/app/selectUserById?userId=' + userId).then(res => {
					if (res.code === 0) {
						this.userState = res.data.member;
					} else {
						uni.showModal({
							showCancel: false,
							title: '登录失败',
							content: res.msg
						});
						this.$queue.logout();
					}
					uni.hideLoading();
				});
			},
			selectTask(type, sort) {
				this.loadingType = 1;
				uni.showLoading({
					title: '加载中...'
				});
				var userStateByMoney = 1;
				let userId = this.$queue.getData('userId');
				if (!userId) {
					userId = '-1';
				}
				this.$Request.getJ('/helpTask/selectHelpTaskV1?page=' + this.page + '&limit=' + this.size + '&sort=' + sort +
					'&userId=' + userId + '&desc=' + this.tabSelect + '&classifyId=' + this.tabclassifyId).then(res => {
						console.log('任务列表',res);
					if (res.code === 0) {
						if (this.page === 1) {
							this.taskList = [];
						}

						for (var i = 0; i < res.data.pageUtils.list.length; i++) {

							if (res.data.pageUtils.list[i].classify === 1) {
								res.data.pageUtils.list[i].title = '【限安卓】' + res.data.pageUtils.list[i].title;
							} else if (res.data.pageUtils.list[i].classify === 2) {
								res.data.pageUtils.list[i].title = '【限苹果】' + res.data.pageUtils.list[i].title;
							}

							//价钱=价钱-(价钱*ping+价钱*zhishu +价钱*feizhishu)
							var jiaqian = res.data.pageUtils.list[i].taskOriginalPrice;
							var ping = res.data.ping.rate;
							var zhishu = res.data.zhishu.rate;
							var feizhishu = res.data.feizhishu.rate;
							res.data.pageUtils.list[i].taskOriginalPrice = this.numFilter(jiaqian - (jiaqian * ping + jiaqian * zhishu +
								jiaqian *
								feizhishu));
							this.taskList.push(res.data.pageUtils.list[i]);
						}
						console.log("res.data.pageUtils.list.length: ",res.data.pageUtils.list.length);
						console.log("this.size: ",this.size);
						console.log("this.taskList: ",this.taskList.length);
						if (res.data.pageUtils.list.length === this.size) {
							this.loadingType = 0;
						} else {
							this.loadingType = 3;
						}
					} else {
						this.loadingType = 2;
					}
					uni.hideLoading();
					if (type === 'Refresh') {
						uni.stopPullDownRefresh(); // 停止刷新
					}
				});
			},
			numFilter(value) {
				// 截取当前数据到小数点后三位
				let tempVal = parseFloat(value).toFixed(3)
				let realVal = tempVal.substring(0, tempVal.length - 1)
				return realVal
			},
			selectTask1(type, sort) {
				this.loadingType = 1;
				var userStateByMoney = 1;
				let userId = this.$queue.getData('userId');
				this.$Request.getT('/helpTask/selectHelpTask?page=' + this.page + '&limit=' + this.size + '&sort=' + sort +
					'&userId=' + userId).then(res => {
					if (res.code === 0) {
						if (this.page === 1) {
							this.taskList = [];
						}
						for (var i = 0; i < res.data.pageUtils.list.length; i++) {

							if (res.data.pageUtils.list[i].classify === 1) {
								res.data.pageUtils.title = '【限安卓】' + res.data.pageUtils.title;
							} else if (res.data.pageUtils.list[i].classify === 2) {
								res.data.pageUtils.title = '【限苹果】' + res.data.pageUtils.title;
							}

							var jiaqian = res.data.pageUtils.list[i].taskOriginalPrice;
							var ping = res.data.ping.rate;
							var zhishu = res.data.zhishu.rate;
							var feizhishu = res.data.feizhishu.rate;
							res.data.pageUtils.list[i].taskOriginalPrice = (jiaqian - (jiaqian * ping + jiaqian * zhishu + jiaqian *
								feizhishu)).toFixed(2);
							this.taskList.push(res.data.pageUtils.list[i]);
						}

						this.loadingType = 0;
					} else {
						this.loadingType = 2;
					}
					if (type === 'Refresh') {
						uni.stopPullDownRefresh(); // 停止刷新
					}
				});
			},
			taskItem(id) {
				uni.navigateTo({
					url: './taskItem?id=' + id
				});
			},
			//统一登录跳转
			goLoginInfo() {
				this.$queue.setData('href', '/pages/task/index');
				uni.navigateTo({
					url: '/package-task/pages/public/login'
				});
			},
			topScrollTap: function() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			tabClick(tab) {
				this.switchTab(tab.id, tab.sort);
			},
			tabChange(e) {
				this.switchTab(tab.id, tab.sort);
			},
			tabSlect(tab, index) {
				this.page = 1;
				this.tabBars[this.tabSort].select = 0;
				this.tabBars[0].select = 1;
				this.tabSort = 0;
				this.tabSelect = 1;
				this.tabIndex = 'hot';

				this.tabIndex1 = index;
				this.tabclassifyId = tab.id;
				this.selectTask('switch', 0);
			},
			switchTab(index, sort) {
				this.page = 1;
				if (this.tabBars[sort].select === 0) {
					this.tabSelect = 1;
					this.tabBars[this.tabSort].select = 0;
					this.tabBars[sort].select = this.tabSelect;
				} else if (this.tabSort === sort && this.tabBars[this.tabSort].select === 1) {
					this.tabSelect = 2;
					this.tabBars[this.tabSort].select = this.tabSelect;
				} else if (this.tabSort === sort && this.tabBars[this.tabSort].select === 2) {
					this.tabSelect = 1;
					this.tabBars[this.tabSort].select = this.tabSelect;
				} else {
					this.tabBars[this.tabSort].select = 0;
				}
				this.tabSort = sort;
				this.tabIndex = index;
				this.taskList = [];
				this.selectTask('switch', sort);
			}
		},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop > 200;
		},
		onReachBottom: function() {
			this.page = this.page + 1;
			this.selectTask('', this.tabSort);
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.selectTask('Refresh', this.tabSort);
		}
	};
</script>

<style lang="less" scoped>
	@import '../../static/less/index.less';
	@import '../../static/css/index.css';

	page {
		background: #FFFFFF;
	}

	.order-view {
		display: flex;
		flex-direction: row;
		height: 160upx;
		margin: 20upx;
		box-shadow: rgba(183, 183, 183, 0.3) 1px 1px 10px 1px;
		width: 95%;
		border-radius: 20upx;
	}

	.order-view-image {
		width: 70upx;
		height: 70upx;
	}
	
	.order-view-image1 {
		width: 150upx;
		height: 150upx;
	}

	.order-view-view {
		text-align: center;
		padding: 20upx 10upx;
		width: 140upx;
	}

	.order-view-text {
		color: #000000;
		font-size: 24upx;
		margin-top: 10upx;
		margin-left: 8upx;
	}

	.tui-tabs {
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		background-color: #fafafa;
		/* #ifdef MP-ALIPAY || MP-BAIDU */
		height: 100vh;
		/* #endif */
	}

	.tui-scroll-h {
		width: 750rpx;
		height: 80rpx;
		background-color: #ffffff;
		flex-direction: row;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
		/* #ifdef H5 */
		position: fixed;
		top: 44px;
		left: 0;
		z-index: 999;
		/* #endif */
	}

	.tui-line-h {
		/* #ifdef APP-PLUS */
		height: 1rpx;
		background-color: #cccccc;
		/* #endif */
		position: relative;
	}

	/* #ifndef APP-PLUS*/
	.tui-line-h::after {
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #cccccc;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 0;
	}

	/* #endif */

	.tui-tab-item {
		/* #ifndef APP-PLUS */
		display: flex;
		/* #endif */
		// flex-wrap: nowrap;
		// padding-left: 34rpx;
		// padding-right: 34rpx;
	}

	.tui-tab-item-title {
		display: flex;
		color: #555;
		font-size: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		flex-wrap: nowrap;
		white-space: nowrap;
	}

	.tui-tab-item-title-active {
		display: flex;
		border-bottom: 1px solid rgb(225, 10, 7);
		color: #E10A07;
		font-size: 32upx;
		font-weight: bold;
		border-bottom-width: 6upx;
		text-align: center;
	}

	.tui-swiper-box {
		flex: 1 !important;
		/* #ifdef H5 */
		margin-top: 80rpx;
		/* #endif */
	}

	.tui-swiper-item {
		flex: 1 !important;
		flex-direction: row;
	}

	.tui-scroll-v {
		flex: 1;
		/* #ifndef MP-ALIPAY */
		flex-direction: column;
		/* #endif */
		width: 750rpx;
	}
</style>
